<template>
      <el-card class="box-card">
                <template #header>
                    <div class="card-header">
                        <el-button @click="onAddArticle">文章发布</el-button>
                    </div>
                </template>
                <!-- v-loading="loading" -->
                <el-table :data="articleList" style="width: 100%">
                    <el-table-column label="id" prop="id"></el-table-column>
                    <el-table-column label="文章标题" prop="title" width="260">
                    </el-table-column>
                    <el-table-column label="分类" prop="cate"></el-table-column>
                    <el-table-column label="发表时间" >
                        <template #default="{ row }">
                            {{ formatTime(row.updataetime) }}
                        </template>

                    </el-table-column>
                    <el-table-column label="操作" width="100">
                        <template #default="{ row }">
                            <el-button :icon="Edit" circle plain type="primary"
                                @click="onEditArticle(row)"></el-button>
                            <el-button :icon="Delete" circle plain type="danger"
                                @click="onDeleteArticle(row)"></el-button>
                        </template>
                    </el-table-column>
                    <template #empty>
                        <el-empty description="暂无数据" />
                    </template>
                </el-table>
        </el-card>

        <!-- ref="articleRef"获取dom对象，调用open方法打开抽屉 -->
        <Drawer @success="onSuccess" ref="articleRef" />
</template>
<script setup>
// @ts-ignore
import { artDelService, GetArtList } from '@/api/article.js'
// @ts-ignore
import { formatTime } from '@/utils/format.js'
import { onMounted, ref } from 'vue'
// @ts-ignore
import Drawer from '@/views/Drawer.vue'

import { Delete, Edit } from '@element-plus/icons-vue'

const articleList = ref([

])
const articleRef = ref()

onMounted(() => {
    // const res = GetArtList()
    // res.then((res) => {
    //     // @ts-ignore
    //     articleList.value = res.data.data
    // })
})
const onAddArticle = () => {
    articleRef.value.open({})

}
const onEditArticle = (row) => {
    articleRef.value.open(row)

}

//弹出页面成功添加按钮
const onSuccess = () => {
    const res = GetArtList()
    res.then((res) => {
        // @ts-ignore
        articleList.value = res.data.data
    })
}
const onDeleteArticle = async (row) => {
    // @ts-ignore
    await ElMessageBox.confirm('你确认删除该文章信息吗？', '温馨提示', {
        type: 'warning',
        confirmButtonText: '确认',
        cancelButtonText: '取消'
    })
    console.log("row is", row);

    await artDelService(row)
    // @ts-ignore
    ElMessage({ type: 'success', message: '删除成功' })
    const res = GetArtList()
    res.then((res) => {
        // @ts-ignore
        articleList.value = res.data.data
    })
}

</script>

<style scoped>

</style>